<template>
  <el-header id="Header">
    <!-- 左侧LOGO -->
    <el-row>
      <el-col :span="18">
        <div class="logo">
          <img src="@/assets/img/homeLogo.jpg" alt="dark_goKun代打" />
          <div class="name"></div>
        </div>
      </el-col>

      <!-- 右侧退出按钮 -->
      <el-row type="flex" justify="end">
        <el-col :span="6" :pull="3">
          <el-button type="primary" @click="exit" class="exit">退出按钮</el-button>
        </el-col>
      </el-row>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: 'Header',
  methods: {
    exit() { // 退出登录方法
    // console.log(1);
    
      window.sessionStorage.removeItem('token') // 删除token
      window.sessionStorage.removeItem('isActive'); // 删除记录的默认选中侧边栏
      this.$router.replace('/login') // 返回login页面
      
    }
  }
}
</script>

<style lang="scss" scoped>
#Header {  // 头部
  background-color: rgba(54, 61, 64, 1);
}

.exit { // 退出按钮
  
  margin-top: 8px;
}

.logo { // logo元素
  
  height: 100%;
}

.logo img { // 图片
  margin-top: 4px;
  width: 56px;
  height: auto;
  border-radius: 100%;
}

.logo .name { // lgoo名
  display: inline;
}

.logo .name::after { // 伪类
  
  content: '购物管理系统';
  color: rgba(204, 204, 204, 1);
  font-style: italic;
  font-size: 20px;
  font-weight: bolder;
  position: absolute;
  left: 150px;
  top: 25px;
  transform: translate(-50%, -50%);
}
</style>